<!-- 修改密码 -->
<template>
  <a-form>
    <a-form-item label="用户名称:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
      {{userInfo.username}}
    </a-form-item>
    <a-form-item required label="原登录密码:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
      <a-input :type="inputType" v-model="formPass.old_password" style="width: 300px" placeholder="请输入原登录密码">
        <a-icon slot="suffix" :type="inputType ==='password' ? 'eye-invisible' : 'eye'" @click="wordShow" />
      </a-input>
    </a-form-item>
    <a-form-item required label="新登录密码:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
      <a-input :type="inputType1" v-model="formPass.password" style="width: 300px" placeholder="请输入新登录密码">
        <a-icon slot="suffix" :type="inputType1 ==='password' ? 'eye' : 'eye-invisible'" @click="wordShow1" />
      </a-input>
    </a-form-item>
    <a-form-item required label="确认新密码:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 12,xs:24 }">
      <a-input :type="inputType2" v-model="formPass.c_password" style="width: 300px" placeholder="请再次输入新登录密码">
        <a-icon slot="suffix" :type="inputType2 ==='password' ? 'eye' : 'eye-invisible'" @click="wordShow2" />
      </a-input>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 16, offset: 4  }">
      <a-button type="primary" @click="passOk" :disabled="isdisabledFn" style="width: 150px;">保存</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  export default {
    name: "EditPass",
    data() {
      return {
        userInfo: {}, //local用户信息
        isDisabl: false,//按钮状态

        /* 文本框类型 */
        inputType: 'password',
        inputType1: 'password',
        inputType2: 'password',
        /* 文本框类型end */

        //修改密码
        formPass: {
          id: '', //id
          old_password: '', //旧密码
          password: '', //新密码
          c_password: '', //2次新密码
        }
      }
    },
    mounted() {
      //获取local里面当前的用户信息
      this.userInfo = JSON.parse(this.$ls.storage.pro__User).value
      //用户名
      this.formPass.id = this.userInfo.id
    },
    computed: {
      ...mapState({
      	requestCode: state => state.Passport.requestCode,
      }),
  　　isdisabledFn(){
        if(this.formPass.old_password != ''
        && this.formPass.password != ''
        && this.formPass.c_password != ''){
          return this.isdisabled = false;
        } else {
          return this.isdisabled = true;
        }
  　　},
    },
    methods: {
      ...mapActions({
        changePass: 'Passport/changePass', //修改密码
      }),

      /* 密码文本框显示隐藏 */
      wordShow() {
        this.inputType === 'password' ? this.inputType = 'text' : this.inputType = 'password'
      },
      wordShow1() {
        this.inputType1 === 'password' ? this.inputType1 = 'text' : this.inputType1 = 'password'
      },
      wordShow2() {
        this.inputType2 === 'password' ? this.inputType2 = 'text' : this.inputType2 = 'password'
      },
      /* 密码显示隐藏end */

      //确定按钮
      passOk() {
        let that = this
        this.changePass(this.formPass)
        setTimeout(()=> {
          if(this.requestCode === 0) {
            this.$warning({
              title: '密码已更改，请重新登录',
              content: `由于当前账号 ${that.userInfo.username} 密码已更改，请重新登录！`,
              onOk() {
                  localStorage.clear()
                  that.$router.replace({
                    path: '/passport/Login',
                  });
              },
            });
          }
        }, 500);
      },
    }
  }
</script>

<style scoped>

</style>
